<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
      <!-- // 容器 -->
      <swiper-slide v-for="item of banners" :key="item.bannerId">
        <img :src="item.pic" />
      </swiper-slide>
      <!-- <swiper-slide>Slide 2</swiper-slide> -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 推荐歌单 -->
    <div class="m-homeremd">
      <h2>推荐歌单</h2>
      <div class="box">
        <div class="remd" v-for="item of arr" :key="item.id" @click="jump(item.id)">
          <img :src="item.picUrl" :alt="item.name" />
          <p v-text="item.name"></p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="remd_tl">
      <h2>最新音乐</h2>
      <ul>
        <li v-for="item of list" :key="item.id" @click="$router.push('/music/'+item.id)">
          <div class="titil">
            <p>
              {{ item.song.name}}
              <span
                v-for="(ites,inds) of item.song.alias"
                :key="inds"
              >({{ ites }})</span>
            </p>
            <p>
              <span v-text="item.song.artists[0].name"></span>
              <span>-</span>
              <span>{{ item.song.album.name }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      arr: [],
      list: [],
      swiperOptions: {
        autoplay: true,
        speed: 2000,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      banners: []
    };
  },
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  methods: {
    BannerGet() {
      return axios.get("/api/banner?type=1");
    },
    jump(id){
      this.$router.push('/songsheet/'+id)
    }
  },
  mounted() {
    /* 推荐歌单 */
    axios({
      url: "/api/personalized",
      params: { limit: 6 }
    }).then(result => {
      this.arr = result.data.result;
    });
    // 最新音乐
    axios({
      url: "/api/personalized/newsong"
    }).then(result => {
      this.list = result.data.result;
    });
    axios.all([this.BannerGet()]).then(
      axios.spread(result => {
        this.banners = result.data.banners;
      })
    );
  }
};
</script>
<style scoped>
/* 推荐歌单 */
.remd_tl h2,
.m-homeremd h2 {
  font-size: 0.3rem;
  font-weight: 500;
  padding-left: 0.1rem;
  border-left: 2px solid red;
  margin: 0.2rem;
  margin-left: 0;
}
.swiper {
  width: 100%;
  height: 2.5rem;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.swiper-pagination {
    bottom: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.remd {
  width: 32%;
  margin-bottom: 0.15rem;
}
.remd img {
  width: 100%;
}
.remd p {
  font-size: 0.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* display:-webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical; */
}
/* 最新音乐 */
ul {
  font-size: 0.32rem;
  padding: 0 10px;
}
ul li {
  border-bottom: 0.5px solid #ccc;
  padding-bottom: 0.1rem;
}
.titil {
  width: 92%;
}
.titil p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.titil p span {
  color: rgb(128, 124, 124);
}
.titil p:nth-child(2) span {
  font-size: 0.24rem;
  color: rgb(128, 124, 124);
}
</style>